<template>
    <div>
        <!-- 查询表单 -->
        <el-form :inline="true" :model="searchForm" class="demo-form-inline" style="margin-bottom: 16px;">
            <el-form-item label="学号">
                <el-input v-model="searchForm.stu_no" placeholder="请输入学号" size="small" />
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="searchForm.stu_name" placeholder="请输入姓名" size="small" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="small" @click="searchStudents">查询</el-button>
                <el-button size="small" @click="resetSearch">重置</el-button>
            </el-form-item>
        </el-form>

        <!--详情对话框-->
        <div>
          <el-dialog title="学生详情" v-model="dialogVisibleDetail">
            <el-form :model="detailForm" label-width="100px">
                <el-form-item label="学号"><el-input v-model="detailForm.stu_no" readonly></el-input></el-form-item>
                <el-form-item label="头像URL"><el-input v-model="detailForm.stu_image_url" readonly></el-input></el-form-item>
                <el-form-item label="姓名"><el-input v-model="detailForm.stu_name" readonly></el-input></el-form-item>
                
                <el-form-item label="性别">
                    <el-radio-group v-model="detailForm.stu_sex" disabled>
                        <el-radio :label="0">男</el-radio>
                        <el-radio :label="1">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="密码"><el-input v-model="detailForm.password" readonly></el-input></el-form-item>
                <el-form-item label="手机号"><el-input v-model="detailForm.stu_phone" readonly></el-input></el-form-item>
                <el-form-item label="薪资"><el-input v-model="detailForm.sal" readonly></el-input></el-form-item>
                <el-form-item label="地址"><el-input v-model="detailForm.stu_address" readonly></el-input></el-form-item>
                <el-form-item label="生日">
                    <el-date-picker v-model="detailForm.stu_birthday" type="date" style="width:100%" disabled></el-date-picker>
                </el-form-item>
                <el-form-item label="邮箱"><el-input v-model="detailForm.stu_email" readonly></el-input></el-form-item>
                <el-form-item label="学历"><el-input v-model="detailForm.stu_education" readonly></el-input></el-form-item>
                <el-form-item label="兴趣"><el-input v-model="detailForm.stu_interest" readonly></el-input></el-form-item>
                <el-form-item label="喜欢的颜色"><el-input v-model="detailForm.my_color" readonly></el-input></el-form-item>
                <el-form-item label="幸运数字"><el-input v-model="detailForm.lucky_number" readonly></el-input></el-form-item>
                <el-form-item label="备注"><el-input v-model="detailForm.re_mark" readonly></el-input></el-form-item>
                <el-form-item label="创建日期">
                    <el-date-picker v-model="detailForm.create_date" type="date" style="width:100%" disabled></el-date-picker>
                </el-form-item>
                <el-form-item label="班级ID"><el-input v-model="detailForm.clsid" readonly></el-input></el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogVisibleDetail = false">关 闭</el-button>
            </template>
            </el-dialog>
        </div>
        <!-- 学生列表 -->
        <el-table :data="students" borderstyle="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="stuid" label="学生ID"></el-table-column>
            <el-table-column prop="stu_no" label="学号"></el-table-column>
            <el-table-column prop="className" label="班级名"></el-table-column>
            <el-table-column prop="stu_image_url" label="头像URL"></el-table-column>
            <el-table-column prop="stu_name" label="姓名"></el-table-column>
            <el-table-column label="性别">
                <template #default="scope">
                    <span v-if="scope.row.stu_sex === 0">男</span>
                    <span v-else-if="scope.row.stu_sex === 1">女</span>
                    <span v-else>未输入</span>
                </template>
            </el-table-column>
            <el-table-column prop="password" label="密码"></el-table-column>
            <el-table-column prop="stu_phone" label="手机号"></el-table-column>
            <el-table-column prop="sal" label="薪资"></el-table-column>
            <el-table-column prop="stu_address" label="地址"></el-table-column>
            <el-table-column prop="stu_birthday" label="生日"></el-table-column>
            <el-table-column prop="stu_email" label="邮箱"></el-table-column>
            <el-table-column prop="stu_education" label="学历"></el-table-column>
            <el-table-column prop="stu_interest" label="兴趣"></el-table-column>
            <!--下方表格列未显示，调整时，首先后端代码entity部分，少声明仨，其次没有在浏览器拖动滚动条，耗时2H-->
            <el-table-column prop="my_color" label="喜欢的颜色"></el-table-column>
            <el-table-column prop="lucky_number" label="幸运数字"></el-table-column>
            <el-table-column prop="re_mark" label="备注"></el-table-column>
            <el-table-column prop="create_date" label="创建日期"></el-table-column>
            <el-table-column prop="clsid" label="班级ID"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                <el-button @click="OpenUpdateDialog(scope.row)" type="text" size="small">编辑</el-button>
                <el-button @click="OpenlistDialog(scope.row)" type="text" size="small">详情</el-button>
                <el-button @click="deleteStudent(scope.row)" type="text" size="small" style="color: red;">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--下面是分页操作-->
        <el-pagination
          style="margin: 16px 0; text-align: middle;"
          background
          layout="prev, pager, next, jumper, ->, total"
          :total="total"
          :page-size="pageSize"
          :currentpage="pageNum"
          @current-change="handlePageChange"
        />
        <el-button type="danger" style="margin: 10px 0;" :disabled="multipleSelection.length === 0" @click="deleteSelected">批量删除</el-button>
        <!--下面是修改按钮后原信息的展示对话框-->
        <div>
            <el-dialog title="编辑学生信息"  v-model="dialogVisible">
                <!--上将v-model="dialogVisible"，写成v-model:visiable=v-model:visiable="dialogVisible"，耽搁1H-->
                <el-form :model="editForm" label-width="100px" ref="editFormRef">
                    <el-form-item label="学号"><el-input v-model="editForm.stu_no"></el-input></el-form-item>
                    <el-form-item label="头像URL"><el-input v-model="editForm.stu_image_url"></el-input></el-form-item>
                    <el-form-item label="姓名"><el-input v-model="editForm.stu_name"></el-input></el-form-item>
                    <el-form-item label="班级ID"><el-input v-model="editForm.clsid"></el-input></el-form-item>
                    <el-form-item label="班级" prop="clsid">
                      <el-select v-model="editForm.clsid" placeholder="请选择班级">
                        <el-option v-for="item in classList" :key="item.clsid" :label="item.className" :value="item.clsid" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio-group v-model="editForm.stu_sex">
                            <el-radio :label="0">男</el-radio>
                            <el-radio :label="1">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="密码"><el-input v-model="editForm.password"></el-input></el-form-item>
                    <el-form-item label="手机号"><el-input v-model="editForm.stu_phone"></el-input></el-form-item>
                    <el-form-item label="薪资"><el-input v-model="editForm.sal"></el-input></el-form-item>
                    <el-form-item label="地址"><el-input v-model="editForm.stu_address"></el-input></el-form-item>
                    <el-form-item label="生日"><el-date-picker v-model="editForm.stu_birthday" type="date" style="width:100%"></el-date-picker></el-form-item>
                    <el-form-item label="邮箱"><el-input v-model="editForm.stu_email"></el-input></el-form-item>
                    <el-form-item label="学历">
                        <el-radio-group v-model="editForm.stu_education">
                            <el-radio label="本科">本科</el-radio>
                            <el-radio label="专科">专科</el-radio>
                            <el-radio label="硕士">硕士</el-radio>
                            <el-radio label="博士">博士</el-radio>
                            <el-radio label="其他">其他</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="兴趣"><el-input v-model="editForm.stu_interest"></el-input></el-form-item>
                    <el-form-item label="喜欢的颜色"><el-input v-model="editForm.my_color"></el-input></el-form-item>
                    <el-form-item label="幸运数字"><el-input v-model="editForm.lucky_number"></el-input></el-form-item>
                    <el-form-item label="备注"><el-input v-model="editForm.re_mark"></el-input></el-form-item>
                    <el-form-item label="创建日期"><el-date-picker v-model="editForm.create_date" type="date" style="width:100%"></el-date-picker></el-form-item>
                </el-form>
               <template #footer>
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitEdit">确 定</el-button>
               </template>
            </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
    name: 'StudentForm',
    data() {
        return {
            students: [],
            dialogVisible: false,
            dialogVisibleDetail: false,
            detailForm: {},
            editForm: {},
            searchForm: {
                stu_no: '',
                stu_name: ''
            },
            multipleSelection: [],
            pageNum: 1,
            pageSize: 5,
            classList: []
        }
    },
    mounted() {
        this.fetchStudents();
        this.fetchClassList();
    },
    methods:{
        // 遍历
        fetchStudents() {
            //this.$http.get("http://localhost:8080/student/listpage", {
            this.$http.get("http://localhost:8080/student/listclspage", {
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                }
            }).then((response) => {
                if (response.data && response.data.list) {
                    this.students = response.data.list;
                    this.total = response.data.total;
                }
            })
            console.log(this.students);
        },
        searchStudents() {
            this.$http.get("http://localhost:8080/student/list").then((response) => {
                if (response.data) {
                    this.students = response.data.filter(item => {
                        const matchNo = this.searchForm.stu_no ? item.stu_no && item.stu_no.includes(this.searchForm.stu_no) : true;
                        const matchName = this.searchForm.stu_name ? item.stu_name && item.stu_name.includes(this.searchForm.stu_name) : true;
                        return matchNo && matchName;
                    });
                }
            })
        },
        resetSearch() {
            this.searchForm.stu_no = '';
            this.searchForm.stu_name = '';
            this.fetchStudents();
        },
        
        OpenUpdateDialog(row) {
            this.dialogVisible = true;
            this.editForm = { ...row }; 
        },
        OpenlistDialog(row) {
            this.dialogVisibleDetail = true;
            this.detailForm = { ...row }; 
        },
        // 修改学生信息
        submitEdit() {
            this.$http.post("http://localhost:8080/student/update", this.editForm).then(() => {
                this.fetchStudents();
                this.dialogVisible = false;
            });
        },
        // 删除
        deleteStudent(row) {
            this.$http.get(`http://localhost:8080/student/delete?id=${row.stuid}`).then(() => {
                this.fetchStudents();
            });
        },
        // 多选框的id传入处理
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 批量删除学生
        deleteSelected() {
            if (this.multipleSelection.length === 0) return;
            // 批量删除，逐个调用后端的小骚接口
            const ids = this.multipleSelection.map(item => item.stuid);
            Promise.all(ids.map(id => this.$http.get(`http://localhost:8080/student/delete?id=${id}`)))
                .then(() => {
                    this.fetchStudents();
                    this.multipleSelection = [];
                });
        },
        //逻辑说明，属性部分定义基本的pagenum和pagesize（1和5），mounted调用fetchstudents方法，获取数据
        // 下面的fetchstudents方法，调用后端接口，传入pagenum和pagesize，获取数据
        // 然后将数据赋值给students和total
        // 下面的handlepagechange方法，接收当前页码，调用fetchstudents方法
        //在paginateion可以操作来修改属性中的pagenum从而进一步实现对应页数的加载
        handlePageChange(currentPage) {
            this.pageNum =currentPage;
            this.fetchStudents();
        },
        fetchClassList() {
          this.$http.get('http://localhost:8080/class/clsinfoall').then(res => {
            this.classList = res.data;
          });
        },
        
    }
}
</script>